<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>超链接</title>
  </head>
  <style>
    #p {
      color: aquamarine;
      font-size: 20px;
    }
  </style>

  <body>
    <!-- 
        超链接可以让我们从一个页面跳转到其他页面
            或者是当前页面的其他位置
        使用a标签来定义超链接
            属性：
                href 指定跳转的目标路径
                    - 值可以是一个外部网站的地址
                    - 也可以是一个内部页面的地址
                    - #id跳转到指定位置
                target 打开新地址
                    - _self
                    _ _blank
        超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素
     -->
    <a href="https://www.baidu.com"
      >超链接
      <div>22</div>
    </a>
    <br /><br />
    <a href="#bottom">跳转到bottom</a>
    <br />
    <br />
    <a href="#p">跳转到p段落</a>
    <br />
    <br />
    <a href="javascript:;">点击没反应</a>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis voluptatibus, tenetur nesciunt praesentium
      autem at ab tempore delectus voluptates esse maiores, quos repudiandae pariatur perferendis consequatur adipisci
      doloremque consequuntur labore?
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates officiis quod, ab nobis corporis inventore
      sint? Doloribus eveniet deserunt minima adipisci labore quae et. Aut fugit quasi corporis hic rem.
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates officiis quod, ab nobis corporis inventore
      sint? Doloribus eveniet deserunt minima adipisci labore quae et. Aut fugit quasi corporis hic rem.
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates officiis quod, ab nobis corporis inventore
      sint? Doloribus eveniet deserunt minima adipisci labore quae et. Aut fugit quasi corporis hic rem.
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates officiis quod, ab nobis corporis inventore
      sint? Doloribus eveniet deserunt minima adipisci labore quae et. Aut fugit quasi corporis hic rem.
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates officiis quod, ab nobis corporis inventore
      sint? Doloribus eveniet deserunt minima adipisci labore quae et. Aut fugit quasi corporis hic rem.
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates officiis quod, ab nobis corporis inventore
      sint? Doloribus eveniet deserunt minima adipisci labore quae et. Aut fugit quasi corporis hic rem.
    </p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates officiis quod, ab nobis corporis inventore
      sint? Doloribus eveniet deserunt minima adipisci labore quae et. Aut fugit quasi corporis hic rem.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt illum eveniet assumenda error? Laudantium et ab
      illum voluptate exercitationem, accusamus quas, commodi officia maiores incidunt, eos nihil? Culpa, alias animi?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt illum eveniet assumenda error? Laudantium et ab
      illum voluptate exercitationem, accusamus quas, commodi officia maiores incidunt, eos nihil? Culpa, alias animi?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt illum eveniet assumenda error? Laudantium et ab
      illum voluptate exercitationem, accusamus quas, commodi officia maiores incidunt, eos nihil? Culpa, alias animi?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt illum eveniet assumenda error? Laudantium et ab
      illum voluptate exercitationem, accusamus quas, commodi officia maiores incidunt, eos nihil? Culpa, alias animi?
    </p>
    <p id="p">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt illum eveniet assumenda error? Laudantium et ab
      illum voluptate exercitationem, accusamus quas, commodi officia maiores incidunt, eos nihil? Culpa, alias animi?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt illum eveniet assumenda error? Laudantium et ab
      illum voluptate exercitationem, accusamus quas, commodi officia maiores incidunt, eos nihil? Culpa, alias animi?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt illum eveniet assumenda error? Laudantium et ab
      illum voluptate exercitationem, accusamus quas, commodi officia maiores incidunt, eos nihil? Culpa, alias animi?
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt illum eveniet assumenda error? Laudantium et ab
      illum voluptate exercitationem, accusamus quas, commodi officia maiores incidunt, eos nihil? Culpa, alias animi?
    </p>
    <a href="语义化标签.html" target="_blank">列表2</a>
    <br />
    <br />
    <a id="bottom" href="#">跳转到top</a>
  </body>
</html>
